<template>
  <el-dialog title="采购历史记录" width="90vw" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <div class="h-[80vh] flex" style="flex-direction: column">
      <div>
        <XForm ref="form" :fieldList="fieldList" :options="formOption" :formData="formData" :originOption="originOption" @submit="handleSubmitForm" @reset="handleSubmitForm" />
        <div class="bg-[var(--base-border-color)]h-[1px] mb-[8px]"></div>
        <div class="flex items-center p-[16px] bg-[var(--base-table-hover-bg-color)] mb-[8px]">
          <el-image style="width: 44px; height: 44px" :src="skuInfo.attr_img" />
          <div class="ml-[4px]">
            <VText title="SKU" :value="skuInfo.sku" :line="1" />
            <VText title="产品名称" :value="skuInfo.sku_name" :line="1" />
          </div>
        </div>
      </div>
      <div class="flex-1">
        <vxe-grid v-bind="orderOptions" ref="tableRef" height="auto" />
      </div>
    </div>
    <template #footer>
      <el-button @click="handleClose"> 关闭 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { computed, nextTick, watch } from "vue"
import XForm from "@/components/XForm/index.vue"

import { getWarehouseOptions, purchaseHistoryList, listingPurchaseHistoryList } from "@/api/amazon"
const formOption = ref({ inline: true, option: true, showResetButton: true, submitButtonText: "查询" })
const formData = ref({})
const skuInfo = ref({})
const tableRef = ref()

// 查询
const handleSubmitForm = async () => {
  console.log(tableRef?.value)
  tableRef?.value.commitProxy("query")
}

// 枚举 数据
const originOption = ref({})

onMounted(() => {
  getWarehouseOptions().then((res) => {
    originOption.value.warehouse = res.data
  })
})
const fieldList = ref([
  {
    field: "audit_status",
    type: "select",
    multiple: true,
    collapseTags: true,
    options: {
      placeholder: "状态",
      data: [
        { label: "待提交", value: "1" },
        { label: "待审核", value: "2" },
        { label: "审核中", value: "3" },
        { label: "审核完成", value: "4" },
        { label: "已驳回", value: "5" },
      ],
    },
    style: { width: "200px" },
  },
  {
    field: "purchase_no",
    placeholder: "采购单号",
    type: "textarea",
    style: { width: "200px" },
  },
  {
    field: "destination_warehouse",
    type: "select",
    originField: "warehouse",
    multiple: true,
    collapseTags: true,
    options: {
      placeholder: "仓库",
    },
    style: { width: "200px" },
  },
  {
    field: "create_time",
    type: "dateTimeRangeNorm",
  },
])
const modelValue = ref(false)

const emit = defineEmits(["refresh", "close"])

const info = ref({ shop: "aaa" })

const orderTableData = ref([])
const orderOptions = reactive({
  border: true,
  loading: false,
  resizable: true,
  rowConfig: { height: "74" },
  columns: [
    { field: "purchase_no", title: "采购单号", width: 150 },
    { field: "purchase_status_name", title: "采购状态", width: 100 },
    { field: "audit_status_name", title: "订单状态", width: 90 },
    // { field: "supplier_coding", title: "供应商代码", width: 90 },
    { field: "purchase_type_name", title: "供应商类型", width: 90 },

    { field: "purchase_num", title: "下单数量", width: 80 },
    // {
    //   field: "unit_purchase_price",
    //   width: 100,
    //   slots: {
    //     header: ({}) => (
    //       <div>
    //         <div>采购单价</div>
    //         <div>(不含税)</div>
    //       </div>
    //     ),
    //   },
    // },
    { field: "unit_tracking_price", title: "单个运费", width: 80 },
    // { field: "move_average_price", title: "加权平均价", width: 100 },

    {
      width: 200,
      slots: {
        header: ({}) => (
          <div>
            <div>下单人员/采购时间</div>
            <div>采购耗时</div>
          </div>
        ),
        default: ({ row }) => (
          <div>
            <VText value={row.create_user} line={1} />
            <VText value={row.create_time} line={1} />
            <VText value={row.purchase_date} line={1} />
          </div>
        ),
      },
    },
    {
      title: "货主/需求数/入库数",
      width: 240,
      slots: {
        default: ({ row }) => (
          <div class=" ">
            {row.sale.map((item) => (
              <div class="flex items-center">
                {item.sale_name}：{item.purchase_num} / {item.inbound_num}
              </div>
            ))}
          </div>
        ),
      },
    },
    {
      title: "本地仓待发",
      minWidth: 150,
      slots: {
        header: ({}) => (
          <div>
            <div>预计到货时间</div>
            <div>最后入库时间</div>
          </div>
        ),
        default: ({ row }) => (
          <div class="text-[var(--base-sub-text-color)]">
            <div class="text-red">{row.expect_delivery_time}</div>
            <div>{row.inbound_time}</div>
          </div>
        ),
      },
    },

    { field: "destination_warehouse_name", title: "收货仓库", minWidth: 160 },
    { field: "is_drawback_name", title: "是否退税", width: 80 },
    // { field: "unit_price", title: "采购含税价", width: 100 },
    // { field: "unit_price_price", title: "采购未税报价", width: 110 },
    { field: "unit_untaxed_price", title: "采购未税价", width: 100 },
  ],

  pagerConfig: {
    pageNum: 1,
    pageSize: 20,
  },

  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: async ({ page }) => {
        let param = {
          ...formData.value,
          sku: skuInfo.value.sku,
          pageNum: page.currentPage,
          pageSize: page.pageSize,
          order_source: [2],
        }
        param.purchase_no = param.purchase_no?.split("\n").filter((v) => !!v.trim())
        if (param.create_time) {
          param.create_time = {
            start: param.create_time[0],
            end: param.create_time[1],
          }
        }
        const res = await listingPurchaseHistoryList(param)
        skuInfo.value.sku_name = res.data.sku_name
        res.data = res.data.list
        return res
      },
    },
  },
})

const handleClose = () => {
  modelValue.value = false
  formData.value = {}
}
const open = (row) => {
  modelValue.value = true
  skuInfo.value = row
  nextTick(() => {
    handleSubmitForm()
  })
}

defineExpose({
  open,
})
</script>
<style lang="scss" scoped></style>
